<template>
  <div class="report_container" ref="main">
    <!-- 填报确认 -->
    <div class="header">
      <div style="font-size: 24px; color: #000">
        <strong>核算排放结果:</strong>
      </div>
      <div class="report_btn">
        <div class="btn_box">
          <div class="PreviewBtn" @click="fill()">
            <div class="text">重新填报</div>
          </div>
        </div>
        <div class="btn_box">
          <div class="PreviewBtn" @click="save()">
            <div class="text">获取报告</div>
          </div>
        </div>
      </div>
    </div>
    <!-- report -->
    <div class="company" v-if="basicInformation">
      <p>
        <span style=" white-space: nowrap">组织信息：</span>
        <span>{{ basicInformation.orgId }}</span>
      </p>
      <p>
        <span style=" white-space: nowrap">核算标准：</span>
        <span>{{ basicInformation.standardName }}</span>
      </p>
      <p>
        <span style=" white-space: nowrap">核算行业：</span>
        <span>{{ basicInformation.industryName }}</span>
      </p>
      <p>
        <span style=" white-space: nowrap">核算周期：</span>
        <span>
          {{ basicInformation.startTime }} -
          {{ basicInformation.endTime }}
        </span>
      </p>
    </div>
    <div class="report_info_box" ref="content">
      <div class="report_info">
        <div class="icon">
          <a-icon type="share-alt" :style="{ fontSize: '90px', color: 'rgb(80, 186, 243)' }" />
        </div>
        <div class="text">
          <p class="text_name">二氧化碳总排放量</p>
          <p class="text_val">{{ Co2Computed.toFixed(2) }}</p>
        </div>
      </div>
      <div class="report_info">
        <div class="icon">
          <a-icon type="deployment-unit" :style="{ fontSize: '90px', color: 'rgb(155, 198, 85)' }" />
        </div>
        <div class="text">
          <p class="text_name blue">可再生能源消耗量</p>
          <p class="text_val">0.00</p>
        </div>
      </div>
    </div>
    <!-- 1 -->
    <div class="report_info_box">
      <div class="report_info">
        <div class="list">
          <div class="list_li no_border">
            <div class="title">按范围范畴划分</div>
            <div class="title_value blur">暂无</div>
          </div>
          <div class="list_li">
            <div class="accounting">范畴一温室气体排放量</div>
            <div class="accounting_val blur">暂无</div>
          </div>
          <div class="list_li">
            <div class="accounting">范畴二温室气体排放量</div>
            <div class="accounting_val blur">暂无</div>
          </div>
        </div>
      </div>

      <div class="report_info">
        <div class="list">
          <div class="list_li no_border">
            <div class="title">按排放边界结构划分</div>
            <div class="title_value">{{Co2Computed.toFixed(2)}}</div>
          </div>

          <div
            class="list_li"
            v-for="(item,index) in result.result.accountingResultList"
            :key="index"
          >
            <div class="accounting">{{item.boundaryName}}的二氧化碳排放</div>
            <div class="accounting_val">{{item.boundaryEmissionsSum.toFixed(2)}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- report -->
    <div class="report_info_box">
      <div class="report_info">
        <div class="text">
          <p class="text_name blue">绿色电力占比</p>
          <p class="text_val blur">885.02 tCO2e</p>
        </div>
      </div>
      <div class="report_info">
        <div class="text">
          <p class="text_name green">相当于减少了火力发电产生的二氧化碳排放量</p>
          <p class="text_val blur">0.00 KWh</p>
        </div>
      </div>
    </div>

    <!-- contact_us -->
    <div class="contact_us" ref="scrollRef">
      <div>
        <strong>想要下载此报告和了解更多相关的资讯吗？</strong>
        <p class="text">留下您的联络方式，我们会尽快将报告发送至您的邮箱。</p>
      </div>

      <a-form :form="form" class="input_box">
        <div class="form">
          <div class="form_box">
            <div class="title">您对哪方面感兴趣:*</div>
            <a-select
              default-value="1"
              placeholder="选择核感兴趣方面"
              v-decorator="[
                'select',
                { rules: [{ required: true, message: '请选择核感兴趣方面!' }] },
              ]"
            >
              <a-select-option value="1">统计范畴三(其他间接)温室气体排放量</a-select-option>
              <a-select-option value="2">境外附属公司温室气体计算</a-select-option>
              <a-select-option value="3">温室气体计算指导服务</a-select-option>
            </a-select>
          </div>

          <a-form-item class="form_box">
            <div class="title">工作职能*</div>
            <a-input
              placeholder
              v-decorator="[
                'job',
                { rules: [{ required: true, message: '请填写工作职能' }] },
              ]"
            />
          </a-form-item>

          <div class="form_box">
            <a-form-item class="name pad_lef">
              <div class="title">名*</div>
              <a-input
                placeholder
                v-decorator="[
                  'fullName',
                  { rules: [{ required: true, message: '请填写姓名' }] },
                ]"
              />
            </a-form-item>

            <a-form-item class="name">
              <div class="title">姓*</div>
              <a-input
                placeholder
                v-decorator="[
                  'name',
                  { rules: [{ required: true, message: '请填写姓名' }] },
                ]"
              />
            </a-form-item>
          </div>

          <a-form-item class="form_box">
            <div class="title">工作邮箱*</div>
            <a-input
              placeholder
              v-decorator="[
                'email',
                {
                  rules: [
                    {
                      type: 'email',
                      message: '请输入正确邮箱',
                    },
                    {
                      required: true,
                      message: '请填写邮箱!',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
        </div>

        <div class="form_footer">
          <a-form-item class="tip">
            <a-checkbox-group
              v-decorator="[
                'checkbox-grop',
                {
                  initialValue: ['A'],
                  rules: [
                    { required: true, message: '请勾选服务条款和隐私协议' },
                  ],
                },
              ]"
            >
              <a-checkbox>
                请同意我们的
                <a>服务条款</a> 和
                <a>隐私协议</a>。
              </a-checkbox>
            </a-checkbox-group>
          </a-form-item>

          <div class="btn_box">
            <div class="PreviewBtn" @click="step('previous')">
              <div class="text">确认获取此报告</div>
            </div>
          </div>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
// import Pie from "@/components/chart/Pie";
import { Mixin } from "@/mixins/mixin.js";
export default {
  mixins: [Mixin],
  mounted() {
    this.timer = setInterval(() => {
      if (this.items.length >= 15) {
        clearInterval(this.timer);
        this.timer = null; //清空内存
      } else {
        this.add();
      }
    }, 300);
  },
  components: {
    // Pie,
  },
  computed: {
    Co2Computed() {
      // return 2;
      if (
        this.result.code == 0 &&
        this.result.result.accountingResultList.length > 0
      ) {
        var ResultList = this.result.result.accountingResultList;
        var Co2total = 0;
        ResultList.forEach(item => {
          Co2total += item.boundaryEmissionsSum;
        });
        return Co2total;
      } else {
        return 0;
      }
    }
  },
  methods: {
    fill() {
      this.setStepsCurrent(0);
    },

    onChange() {
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`
      });
    },
    add() {
      this.items.splice(this.items.length, 0, {
        type: "check",
        color: "rgba(82,192,26,1)",
        value: "核算周期:2022-01-03 - 2022-04-01"
      });
    },
    step(step) {
      this.form.validateFields(err => {
        if (!err) {
          console.info("success");
        }
      });
      //   this.$bus.$emit('changeStepsCurrent', step)
    },
    save() {
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.$refs.scrollRef.offsetTop;
      });
    }
  },
  data() {
    return {
      // basicInformation: {
      //   orgId:
      //     "织信息:{{ basicInformat织信息:{{ basicInformat织信息:{{ basicInformat",
      //   standardName:
      //     "织信息:{{ basicInformat织信息:{{ basicInformat织信息:{{ basicInformat织信息:{{ basicInformat",
      //   industryName: "织信息:{{ basicInformat织信息:{{ basicInformat",
      //   startTime: 1,
      //   endTime: 1
      // },
      unclickable: false,
      timer: null,
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
      items: [
        // {
        //   type: 'check',
        //   color: 'rgba(82,192,26,1)',
        //   value: '核算周期:2022-01-03 - 2022-04-01',
        // }
      ]
    };
  },
  beforeDestroy() {
    //或者destroyed钩子函数中执行清除
    clearInterval(this.timer);
    this.timer = null; //清空内存
  }
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .report_container {
    margin: auto;
    max-width: 1440px;
    box-shadow: 15px 20px 64px rgba(140, 160, 179, 0.15);
    background: #fff;
    //   width: 100%;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .header {
      display: flex;
      flex-direction: row;
      padding-bottom: 10px;
      align-items: center;
      justify-content: space-between;
      .report_btn {
        display: flex;
        flex-direction: row;
        .btn_box {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          margin-top: 10px;
          margin-left: 10px;
          .PreviewBtn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 3px;
            height: 48px;
            text-decoration: none;

            cursor: pointer;
            outline: none;
            min-width: 140px;
            padding: 0 16px;

            border: 1px solid #50baf3;
            background: #fff;
            color: #50baf3;
            transition: color 0.5s;
            .text {
              font-size: 16px;
              font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
              font-weight: 600;
              line-height: 1;
              z-index: 4;
            }
            &:hover {
              color: #fff;
              &::after {
                height: 100%;
              }
            }
            &::after {
              content: "";
              position: absolute;
              width: 100%;
              height: 0;
              bottom: 0;
              left: 0;
              background: #50baf3;
              transition: height 0.5s;
              z-index: 0;
            }
          }
        }
      }
    }
    .company {
      padding: 20px 20px;
      border-top: 1px solid #ebebeb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      p {
        font-size: 16px;
        font-weight: 600;
        color: #000;
      }
    }
    .report_info_box {
      padding: 50px 0;
      border-top: 1px solid #ebebeb;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      .report_info {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .list {
          width: 100%;
          padding: 0 30px;
          display: flex;
          flex-direction: column;
          .no_border {
            border-top: none !important;
          }
          .list_li {
            height: 60px;
            line-height: 60px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-top: 1px solid #ebebeb;
            .title {
              font-size: 20px;
              color: #50baf3;
              font-weight: 700;
            }
            .title_value {
              color: #888;
              font-size: 20px;
              font-weight: 700;
             
            }
            .accounting {
              color: #262a2f;
              font-size: 16px;
              margin-left: 16px;
              font-weight: 700;
            }
            .accounting_val {
              color: #888 !important;
            }
            .blur {
              -webkit-filter: blur(5px);
              filter: blur(5px);
            }
          }
        }
        .icon {
          margin-right: 20px;
        }
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .text_name {
            color: rgb(80, 186, 243);
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 16px;
            font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
              BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
              Droid Sans, Helvetica Neue, sans-serif;
            font-weight: 600;
            line-height: 1.2;
          }
          .text_val {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: #262a2f;
          }
          .green {
            color: rgb(80, 186, 243);
          }
          .blue {
            color: rgb(155, 198, 85);
          }
          .blur {
            -webkit-filter: blur(5px);
            filter: blur(5px);
          }
        }
      }
    }

    .contact_us {
      box-shadow: 15px 20px 64px #ebebeb;
      border: 1px solid #ebebeb;
      background: #fff;
      margin-top: 48px;
      padding: 24px;
      color: #262a2f;
      font-size: 16px;
      text-align: left;
      .input_box {
        display: flex;
        align-items: flex-end;
        .form {
          display: flex;
          flex-wrap: wrap;
          margin-top: 8px;
          margin-left: -24px;
          margin-bottom: -24px;
          max-width: 800px;
          width: 100%;
          .form_box {
            margin-bottom: 30px;
            width: 50%;
            padding-left: 24px;
            margin-bottom: 24px;
            display: flex;
            flex-wrap: wrap;
            .name {
              width: 50%;
            }
            .pad_lef {
              padding-right: 10px;
            }
            .title {
              margin-right: 8px;
              font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
              font-size: 14px;
              line-height: 1.2;
              margin-bottom: 12px;
            }
            .ant-select {
              width: 100%;
            }
            .ant-input {
              height: 46px;

              width: 100%;
            }
            .ant-select-selection {
            }
            .ant-select-selection--single {
              height: 46px;
              width: 100%;
            }
            .ant-select-selection__rendered {
              line-height: 46px;
            }
          }
        }
        .form_footer {
          text-align: right;
          flex-shrink: 0;
          margin-left: auto;
          .ant-checkbox-wrapper {
            font-size: 12px !important;
          }
        }
      }
      .text {
        font-size: 14px;
      }
    }
    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
    .btn_box {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-top: 10px;

      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
    }
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .report_container {
    margin: auto;
    max-width: 1440px;
    box-shadow: 15px 20px 64px rgba(140, 160, 179, 0.15);
    background: #fff;
    //   width: 100%;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .header {
      display: flex;
      flex-direction: row;
      padding-bottom: 10px;
      align-items: center;
      justify-content: space-between;
      .report_btn {
        display: flex;
        flex-direction: row;
        .btn_box {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          // margin-top: 10px;
          margin-left: 10px;
          .PreviewBtn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 3px;
            height: 48px;
            text-decoration: none;

            cursor: pointer;
            outline: none;
            min-width: 140px;
            padding: 0 16px;

            border: 1px solid #50baf3;
            background: #fff;
            color: #50baf3;
            transition: color 0.5s;
            .text {
              font-size: 16px;
              font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
              font-weight: 600;
              line-height: 1;
              z-index: 4;
            }
            &:hover {
              color: #fff;
              &::after {
                height: 100%;
              }
            }
            &::after {
              content: "";
              position: absolute;
              width: 100%;
              height: 0;
              bottom: 0;
              left: 0;
              background: #50baf3;
              transition: height 0.5s;
              z-index: 0;
            }
          }
        }
      }
    }
    .company {
      padding: 20px 20px;
      border-top: 1px solid #ebebeb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      p {
        font-size: 16px;
        font-weight: 600;
        color: #000;
      }
    }
    .report_info_box {
      padding: 50px 0;
      border-top: 1px solid #ebebeb;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      .report_info {
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .list {
          width: 100%;
          padding: 0 30px;
          display: flex;
          flex-direction: column;
          .no_border {
            border-top: none !important;
          }
          .list_li {
            height: 60px;
            line-height: 60px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-top: 1px solid #ebebeb;
            .title {
              font-size: 20px;
              color: #50baf3;
              font-weight: 700;
            }
            .title_value {
              color: #888;
              font-size: 20px;
              font-weight: 700;
         
            }
            .accounting {
              color: #262a2f;
              font-size: 16px;
              margin-left: 16px;
              font-weight: 700;
            }
            .accounting_val {
              color: #888 !important;
       
            }
             .blur {
              -webkit-filter: blur(5px);
              filter: blur(5px);
            }
          }
        }
        .icon {
          margin-right: 20px;
        }
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .text_name {
            color: rgb(80, 186, 243);
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 16px;
            font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
              BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
              Droid Sans, Helvetica Neue, sans-serif;
            font-weight: 600;
            line-height: 1.2;
          }
          .text_val {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: #262a2f;
          }
          .green {
            color: rgb(80, 186, 243);
          }
          .blue {
            color: rgb(155, 198, 85);
          }
          .blur {
            -webkit-filter: blur(5px);
            filter: blur(5px);
          }
        }
      }
    }

    .contact_us {
      box-shadow: 15px 20px 64px #ebebeb;
      border: 1px solid #ebebeb;
      background: #fff;
      margin-top: 48px;
      padding: 24px;
      color: #262a2f;
      font-size: 16px;
      text-align: left;
      .input_box {
        display: flex;
        align-items: flex-end;
        .form {
          display: flex;
          flex-wrap: wrap;
          margin-top: 8px;
          margin-left: -24px;
          margin-bottom: -24px;
          max-width: 800px;
          width: 100%;
          .form_box {
            margin-bottom: 30px;
            width: 50%;
            padding-left: 24px;
            margin-bottom: 24px;
            display: flex;
            flex-wrap: wrap;
            .name {
              width: 50%;
            }
            .pad_lef {
              padding-right: 10px;
            }
            .title {
              margin-right: 8px;
              font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
              font-size: 14px;
              line-height: 1.2;
              margin-bottom: 12px;
            }
            .ant-select {
              width: 100%;
            }
            .ant-input {
              height: 46px;

              width: 100%;
            }
            .ant-select-selection {
            }
            .ant-select-selection--single {
              height: 46px;
              width: 100%;
            }
            .ant-select-selection__rendered {
              line-height: 46px;
            }
          }
        }
        .form_footer {
          text-align: right;
          flex-shrink: 0;
          margin-left: auto;
          .ant-checkbox-wrapper {
            font-size: 12px !important;
          }
        }
      }
      .text {
        font-size: 14px;
      }
    }
    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
    .btn_box {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      // margin-top: 10px;

      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .report_container {
    margin: auto;
    max-width: 1440px;
    box-shadow: 15px 20px 64px rgba(140, 160, 179, 0.15);
    background: #fff;
    //   width: 100%;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .header {
      display: flex;
      flex-direction: row;
      // text-align: left;
      padding-bottom: 10px;
      align-items: center;
      justify-content: space-between;
      .report_btn {
        display: flex;
        flex-direction: row;
        .btn_box {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          // margin-top: 10px;
          margin-left: 10px;
          .PreviewBtn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 3px;
            height: 48px;
            text-decoration: none;

            cursor: pointer;
            outline: none;
            min-width: 140px;
            padding: 0 16px;

            border: 1px solid #50baf3;
            background: #fff;
            color: #50baf3;
            transition: color 0.5s;
            .text {
              font-size: 16px;
              font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
              font-weight: 600;
              line-height: 1;
              z-index: 4;
            }
            &:hover {
              color: #fff;
              &::after {
                height: 100%;
              }
            }
            &::after {
              content: "";
              position: absolute;
              width: 100%;
              height: 0;
              bottom: 0;
              left: 0;
              background: #50baf3;
              transition: height 0.5s;
              z-index: 0;
            }
          }
        }
      }
    }
    .company {
      padding: 10px 0px;
      border-top: 1px solid #ebebeb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      p {
        font-size: 16px;
        font-weight: 600;
        color: #000;
        text-align: left;
        display: flex;
        flex-direction: row;
        span {
          flex-wrap: nowrap;
        }
      }
    }
    .report_info_box {
      margin-bottom: 40px;
      padding: 0px 0;
      // border-top: 1px solid #ebebeb;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      .report_info {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        .list {
          width: 100%;
          padding: 0 0px;
          display: flex;
          flex-direction: column;
          .no_border {
            border-top: none !important;
          }
          .list_li {
            height: 60px;
            line-height: 60px;
            padding-right: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-top: 1px solid #ebebeb;
            .title {
              font-size: 20px;
              color: #50baf3;
              font-weight: 700;
            }
            .title_value {
              color: #888;
              font-size: 20px;
              font-weight: 700;
         
            }
            .accounting {
              color: #262a2f;
              font-size: 16px;
              margin-left: 16px;
              font-weight: 700;
            }
            .accounting_val {
              color: #888 !important;
           
            }
              .blur {
              -webkit-filter: blur(5px);
              filter: blur(5px);
            }
          }
        }
        .icon {
          margin-right: 20px;
        }
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .text_name {
            color: rgb(80, 186, 243);
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 16px;
            font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
              BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
              Droid Sans, Helvetica Neue, sans-serif;
            font-weight: 600;
            line-height: 1.2;
          }
          .text_val {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: #262a2f;
          }
          .green {
            color: rgb(80, 186, 243);
          }
          .blue {
            color: rgb(155, 198, 85);
          }
          .blur {
            -webkit-filter: blur(5px);
            filter: blur(5px);
          }
        }
      }
    }

    .contact_us {
      box-shadow: 15px 20px 64px #ebebeb;
      border: 1px solid #ebebeb;
      background: #fff;
      margin-top: 48px;
      padding: 10px;
      color: #262a2f;
      font-size: 16px;
      text-align: left;
      .input_box {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .form {
          display: flex;
          flex-wrap: wrap;
          margin-top: 8px;
          margin-left: -24px;
          margin-bottom: -24px;
          max-width: 800px;
          width: 100%;
          .form_box {
            margin-bottom: 30px;
            width: 100%;
            // padding-left: 24px;
            margin-bottom: 12px;
            display: flex;
            flex-wrap: wrap;
            .name {
              width: 50%;
            }
            .pad_lef {
              padding-right: 10px;
            }
            .title {
              margin-right: 8px;
              font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
              font-size: 14px;
              line-height: 1.2;
              margin-bottom: 12px;
            }
            .ant-select {
              width: 100%;
            }
            .ant-input {
              height: 46px;

              width: 100%;
            }
            .ant-select-selection {
            }
            .ant-select-selection--single {
              height: 46px;
              width: 100%;
            }
            .ant-select-selection__rendered {
              line-height: 46px;
            }
          }
        }
        .form_footer {
          margin-top: 10px;
          text-align: right;
          flex-shrink: 0;
          margin-left: auto;
          .ant-checkbox-wrapper {
            font-size: 12px !important;
          }
        }
      }
      .text {
        font-size: 14px;
      }
    }
    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
    .btn_box {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      // margin-top: 10px;

      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .report_container {
    margin: auto;
    max-width: 1440px;
    box-shadow: 15px 20px 64px rgba(140, 160, 179, 0.15);
    background: #fff;
    //   width: 100%;
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .header {
      display: flex;
      flex-direction: column;
      // text-align: left;
      padding-bottom: 10px;
      align-items: center;
      justify-content: space-between;
      .report_btn {
        display: flex;
        flex-direction: row;
        .btn_box {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          // margin-top: 10px;
          margin-left: 10px;
          .PreviewBtn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 3px;
            height: 48px;
            text-decoration: none;

            cursor: pointer;
            outline: none;
            min-width: 140px;
            padding: 0 16px;

            border: 1px solid #50baf3;
            background: #fff;
            color: #50baf3;
            transition: color 0.5s;
            .text {
              font-size: 16px;
              font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
              font-weight: 600;
              line-height: 1;
              z-index: 4;
            }
            &:hover {
              color: #fff;
              &::after {
                height: 100%;
              }
            }
            &::after {
              content: "";
              position: absolute;
              width: 100%;
              height: 0;
              bottom: 0;
              left: 0;
              background: #50baf3;
              transition: height 0.5s;
              z-index: 0;
            }
          }
        }
      }
    }
    .company {
      padding: 10px 0px;
      border-top: 1px solid #ebebeb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      p {
        font-size: 16px;
        font-weight: 600;
        color: #000;
        text-align: left;
        display: flex;
        flex-direction: row;
        span {
          flex-wrap: nowrap;
        }
      }
    }
    .report_info_box {
      padding: 0px 0;
      // border-top: 1px solid #ebebeb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .report_info {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        .list {
          width: 100%;
          padding: 0 0px;
          display: flex;
          flex-direction: column;
          .no_border {
            border-top: none !important;
          }
          .list_li {
            height: 60px;
            line-height: 60px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-top: 1px solid #ebebeb;
            .title {
              font-size: 20px;
              color: #50baf3;
              font-weight: 700;
            }
            .title_value {
              color: #888;
              font-size: 20px;
              font-weight: 700;
           
            }
            .accounting {
              color: #262a2f;
              font-size: 16px;
              margin-left: 16px;
              font-weight: 700;
            }
            .accounting_val {
              color: #888 !important;
         
            }
              .blur {
              -webkit-filter: blur(5px);
              filter: blur(5px);
            }
          }
        }
        .icon {
          margin-right: 20px;
        }
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .text_name {
            color: rgb(80, 186, 243);
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 16px;
            font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
              BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
              Droid Sans, Helvetica Neue, sans-serif;
            font-weight: 600;
            line-height: 1.2;
          }
          .text_val {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: #262a2f;
          }
          .green {
            color: rgb(80, 186, 243);
          }
          .blue {
            color: rgb(155, 198, 85);
          }
          .blur {
            -webkit-filter: blur(5px);
            filter: blur(5px);
          }
        }
      }
    }

    .contact_us {
      box-shadow: 15px 20px 64px #ebebeb;
      border: 1px solid #ebebeb;
      background: #fff;
      margin-top: 48px;
      padding: 10px;
      color: #262a2f;
      font-size: 16px;
      text-align: left;
      .input_box {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .form {
          display: flex;
          flex-wrap: wrap;
          margin-top: 8px;
          margin-left: -24px;
          margin-bottom: -24px;
          max-width: 800px;
          width: 100%;
          .form_box {
            margin-bottom: 30px;
            width: 100%;
            // padding-left: 24px;
            margin-bottom: 12px;
            display: flex;
            flex-wrap: wrap;
            .name {
              width: 50%;
            }
            .pad_lef {
              padding-right: 10px;
            }
            .title {
              margin-right: 8px;
              font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
              font-size: 14px;
              line-height: 1.2;
              margin-bottom: 12px;
            }
            .ant-select {
              width: 100%;
            }
            .ant-input {
              height: 46px;

              width: 100%;
            }
            .ant-select-selection {
            }
            .ant-select-selection--single {
              height: 46px;
              width: 100%;
            }
            .ant-select-selection__rendered {
              line-height: 46px;
            }
          }
        }
        .form_footer {
          margin-top: 10px;
          text-align: right;
          flex-shrink: 0;
          margin-left: auto;
          .ant-checkbox-wrapper {
            font-size: 12px !important;
          }
        }
      }
      .text {
        font-size: 14px;
      }
    }
    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
    .btn_box {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-top: 10px;

      .PreviewBtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
    }
  }
}
</style>